{% extends "base.html" %}
{% block title %}
报名
{% endblock %}
{% block ext_css %}
<style>
    .register{
        background: url("/static/img/bg3.png#234") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .no_border{
        border-color: crimson;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        display: block;
        width: 100%;
        background-color:rgba(0, 0, 0, 0.0);
        border-radius: 0;
    }
</style>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
{% endblock %}
{% block content %}
    <div class="register viewport">
    <form id="reg_form" method="POST" style="width: 90%; padding:5vw; text-align: left;margin:auto">
      <div class="form-group">
        <label for="team_name">请取个拉风的队名</label>
        <input name="team_name" type="text" class="no_border" id="team_name" required>
      </div>
      <div class="form-group">
        <label for="mobile1">队长手机号码</label>
        <input name="mobile" type="tel" class="no_border" id="mobile1" required>
      </div>
      <div class="form-group">
        <label for="mobile2">队员手机号码1</label>
        <input name="mobile" type="tel" class="no_border" id="mobile2" required>
      </div>
      <div class="form-group">
        <label for="mobile3">队员手机号码2</label>
        <input name="mobile" type="tel" class="no_border" id="mobile3" required>
      </div>
      <div class="form-group">
        <label for="mobile4">队员手机号码3</label>
        <input name="mobile" type="tel" class="no_border" id="mobile4" required>
      </div>
      <div class="form-group">
        <label for="mobile5">队员手机号码4</label>
        <input name="mobile" type="tel" class="no_border" id="mobile5" required>
      </div>
      <div style="text-align: center"> 官方组队微信号:wangqimude </div>
      <div style="text-align: center; padding: 5vw">
          <button type="submit" style="border: medium none;border-spacing: 0;">
            <image src="/static/img/register.png" style="width: 70%"></image>
            </button>
      </div>

    </form>

    </div>

{% endblock %}

{% block ext_script %}
<script type="text/javascript">


$(function () {
    var registed = false;
    var requested = false;
    var params = {};

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wx636097f1cf66faa7', // 必填，公众号的唯一标识
        timestamp: {{ ts }}, // 必填，生成签名的时间戳
        nonceStr: '{{ nonce }}', // 必填，生成签名的随机串
        signature: '{{ signitrue }}',// 必填，签名
        jsApiList: ['scanQRCode', 'chooseWXPay'] // 必填，需要使用的JS接口列表
    });
    wx.ready(function() {
       registed = true
    });
    wx.error(function(res){
        location.href = '/index';
    });
    $("#team_name")[0].oninvalid = function (e) {
        e.target.setCustomValidity("雁过留声人过留名, 大侠还是留下你拉风的名号吧, 请填写队名");
    };
    $("#mobile1")[0].oninvalid = function (e) {
        e.target.setCustomValidity("队长电话必须填写");
    };
    $("#mobile2")[0].oninvalid = function (e) {
        e.target.setCustomValidity("队员电话必须填写");
    };
    $("#mobile3")[0].oninvalid = function (e) {
        e.target.setCustomValidity("队员电话必须填写");
    };
    $("#mobile4")[0].oninvalid = function (e) {
        e.target.setCustomValidity("队员电话必须填写");
    };
    $("#mobile5")[0].oninvalid = function (e) {
        e.target.setCustomValidity("队员电话必须填写");
    };
    $.each($(".no_border"), function (idx, item) {
        item.oninput = function (e){
             e.target.setCustomValidity('');
        }
    });
    $("#reg_form").submit(function (e) {
        let data = $(this).serializeArray();
        $.post('{{ url_for("www.team_name_uesed") }}', {name: data[0].value}, function (resp) {
            if (resp.code != 200){
                alert('这个拉风的队名已经被人抢先了!')
            }else{
                if (!checkPhone(data[1].value)){
                    return alert("队长的电话号码格式不正确");
                }
                if (!checkPhone(data[2].value)){
                    return alert("队员1的电话号码格式不正确");
                }
                if (!checkPhone(data[3].value)){
                    return alert("队员2的电话号码格式不正确");
                }
                if (!checkPhone(data[4].value)){
                    return alert("队员3的电话号码格式不正确");
                }
                if (!checkPhone(data[5].value)){
                    return alert("队员4的电话号码格式不正确");
                }
                let mp = {};
                var ct = 0;
                for(var i=1;i<data.length;i++){
                    if (mp[data[i].value]){
                    }else{
                        mp[data[i].value] = 1;
                        ct++;
                    }
                }
                if (ct<5){
                    return alert("电话号码不能有雷同的");
                }
                $.post('{{ url_for("www.register") }}', {team_name: data[0].value, m1: data[1].value, m2: data[2].value, m3: data[3].value, m4: data[4].value, m5: data[5].value }, function (resp) {
                    if (resp.code == 200){
                        requested = true;
                        params = resp.params;
                        wx.chooseWXPay({
                            appId: params.appId,
                            timestamp: params.timeStamp,
                            nonceStr: params.nonceStr,
                            package: params.package,
                            signType: params.signType,
                            paySign: params.paySign,
                            success: function (res) {
                               let go_to = '{{ url_for("www.after_pay") }}?rid=' + resp.rid;
                               //alert("goto:" + go_to);
                               location.href = go_to;
                            },
                            complete: function(res){
                                 if(res.errMsg == "chooseWXPay:cancel" ) {
                                      $.post('{{ url_for("www.cancel_request") }}?rid=' + resp.rid, {}, function (d) {
                                          alert("您取消了支付")
                                      },'json')
                                 }
                            }
                        });
                    }else{
                        alert(resp.error)
                    }
                }, 'json')
            }
        }, 'json');
        
        e.preventDefault();
    })
})
</script>
{% endblock %}